{% extends "base.html" %}
{% set active_page = "admin_settings" %}
{% block title %}<title>Authentication Settings - {{ SITE_NAME }}</title>{% endblock %}

{% block dashboard_stat %}
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Authentication Settings</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item">Settings</li>
                        <li class="breadcrumb-item active">Authentication Settings</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <form id="settings-editor">
                        <div class="card card-outline card-primary shadow">
                            <div class="card-header">
                                <h3 class="card-title">Settings Editor</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="overlay-wrapper" data-bind="visible: loading() || saving()">
                                    <div class="overlay">
                                        <i class="fas fa-3x fa-sync-alt fa-spin"></i>
                                        <div class="text-bold pt-2 pl-2"
                                             data-bind="text: (loading() ? 'Loading' : 'Saving') + ' settings...'"></div>
                                    </div>
                                </div>
                                <!-- /.overlay-wrapper -->
                                <div class="alert alert-dismissible alert-success" style="display: none;"
                                     data-bind="visible: saved">
                                    <button type="button" class="close" aria-hidden="true"
                                            data-bind="click: saved(false)">×
                                    </button>
                                    <h5><i class="icon fas fa-check"></i> Saved!</h5>
                                    These settings have been saved to the database.
                                </div>
                                <div class="alert alert-dismissible alert-danger" style="display: none;"
                                     data-bind="visible: save_failed">
                                    <button type="button" class="close" aria-hidden="true"
                                            data-bind="click: save_failed(false)">×
                                    </button>
                                    <h5><i class="icon fas fa-ban"></i> Error!</h5>
                                    These settings could <strong>not</strong> be saved to the database!
                                </div>
                                <div class="alert alert-dismissible" style="display: none;"
                                     data-bind="visible: messages().length, class: 'alert alert-dismissible alert-' + messages_class()">
                                    <button type="button" class="close" aria-hidden="true"
                                            data-bind="click: messages([])">×
                                    </button>
                                    <h5><i class="icon fas fa-info"></i> Additional Information</h5>
                                    <ul data-bind="foreach: messages">
                                        <li data-bind="text: $data"></li>
                                    </ul>
                                </div>
                                <div class="nav-tabs-custom">
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li class="nav-item">
                                            <a data-tab="local"
                                               data-bind="click: onTabClick, class: 'nav-link' + (tab_active() == 'local' ? ' active' : '')"
                                               href="#" data-toggle="pill" role="tab">Local</a>
                                        </li>
                                        <li class="nav-item">
                                            <a data-tab="ldap"
                                               data-bind="click: onTabClick, class: 'nav-link' + (tab_active() == 'ldap' ? ' active' : '')"
                                               href="#" data-toggle="pill" role="tab">LDAP</a>
                                        </li>
                                        <li class="nav-item">
                                            <a data-tab="google"
                                               data-bind="click: onTabClick, class: 'nav-link' + (tab_active() == 'google' ? ' active' : '')"
                                               href="#" data-toggle="pill" role="tab">Google
                                                OAuth</a>
                                        </li>
                                        <li class="nav-item">
                                            <a data-tab="github"
                                               data-bind="click: onTabClick, class: 'nav-link' + (tab_active() == 'github' ? ' active' : '')"
                                               href="#" data-toggle="pill" role="tab">GitHub
                                                OAuth</a>
                                        </li>
                                        <li class="nav-item">
                                            <a data-tab="azure"
                                               data-bind="click: onTabClick, class: 'nav-link' + (tab_active() == 'azure' ? ' active' : '')"
                                               href="#" data-toggle="pill" role="tab">Azure
                                                OAuth</a>
                                        </li>
                                        <li class="nav-item">
                                            <a data-tab="oidc"
                                               data-bind="click: onTabClick, class: 'nav-link' + (tab_active() == 'oidc' ? ' active' : '')"
                                               href="#" data-toggle="pill" role="tab">OpenID
                                                Connect OAuth</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">

                                        <div data-tab="local"
                                             data-bind="class: 'tab-pane' + (tab_active() == 'local' ? ' active' : '')">
                                            <div class="row">
                                                <div class="col-12 col-sm-6 col-lg-4">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">Local Authentication Settings</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <div class="form-group">
                                                                <input type="checkbox" id="local_db_enabled"
                                                                       name="local_db_enabled"
                                                                       class="checkbox"
                                                                       data-bind="checked: local_db_enabled">
                                                                <label for="local_db_enabled">Local DB
                                                                    Authentication</label>
                                                            </div>
                                                            <div class="form-group">
                                                                <input type="checkbox" id="signup_enabled"
                                                                       name="signup_enabled"
                                                                       class="checkbox"
                                                                       data-bind="enable: local_db_enabled, checked: signup_enabled">
                                                                <label for="signup_enabled">Allow users to sign
                                                                    up</label>
                                                            </div>
                                                            <fieldset>
                                                                <legend>Password Requirements</legend>
                                                                <div class="form-group">
                                                                    <input type="checkbox" id="pwd_enforce_characters"
                                                                           name="pwd_enforce_characters"
                                                                           class="checkbox"
                                                                           data-bind="enable: local_db_enabled, checked: pwd_enforce_characters">
                                                                    <label for="pwd_enforce_characters">
                                                                        Enforce Character Requirements
                                                                    </label>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="pwd_min_len">Minimum Password
                                                                        Length</label>
                                                                    <input type="text" class="form-control"
                                                                           name="pwd_min_len" id="pwd_min_len"
                                                                           data-bind="enable: local_db_enabled() && pwd_enforce_characters(), value: pwd_min_len, valueUpdate: 'afterkeydown'">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="pwd_min_lowercase">Minimum Lowercase
                                                                        Characters</label>
                                                                    <input type="text" class="form-control"
                                                                           name="pwd_min_lowercase"
                                                                           id="pwd_min_lowercase"
                                                                           data-bind="enable: local_db_enabled() && pwd_enforce_characters(), value: pwd_min_lowercase, valueUpdate: 'afterkeydown'">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="pwd_min_uppercase">Minimum Uppercase
                                                                        Characters</label>
                                                                    <input type="text" class="form-control"
                                                                           name="pwd_min_uppercase"
                                                                           id="pwd_min_uppercase"
                                                                           data-bind="enable: local_db_enabled() && pwd_enforce_characters(), value: pwd_min_uppercase, valueUpdate: 'afterkeydown'">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="pwd_min_digits">Minimum Digit
                                                                        Characters</label>
                                                                    <input type="text" class="form-control"
                                                                           name="pwd_min_digits" id="pwd_min_digits"
                                                                           data-bind="enable: local_db_enabled() && pwd_enforce_characters(), value: pwd_min_digits, valueUpdate: 'afterkeydown'">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="pwd_min_special">Minimum Special
                                                                        Characters</label>
                                                                    <input type="text" class="form-control"
                                                                           name="pwd_min_special" id="pwd_min_special"
                                                                           data-bind="enable: local_db_enabled() && pwd_enforce_characters(), value: pwd_min_special, valueUpdate: 'afterkeydown'">
                                                                </div>
                                                                <div class="form-group">
                                                                    <input type="checkbox" id="pwd_enforce_complexity"
                                                                           name="pwd_enforce_complexity"
                                                                           class="checkbox"
                                                                           data-bind="enable: local_db_enabled, checked: pwd_enforce_complexity">
                                                                    <label for="pwd_enforce_complexity">
                                                                        Enforce Complexity Requirement
                                                                    </label>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="pwd_min_complexity">Minimum Complexity
                                                                        (zxcvbn)</label>
                                                                    <input type="text" class="form-control"
                                                                           name="pwd_min_complexity"
                                                                           id="pwd_min_complexity"
                                                                           data-bind="enable: local_db_enabled() && pwd_enforce_complexity(), value: pwd_min_complexity, valueUpdate: 'afterkeydown'">
                                                                </div>
                                                            </fieldset>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->

                                                <div class="col-12 col-sm-6 col-lg-8">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">Settings Help</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <dl class="dl-horizontal">
                                                                <dt>Local DB Authentication</dt>
                                                                <dd>Enable/disable local database authentication.</dd>
                                                                <dt>Allow Users to Signup</dt>
                                                                <dd>Allow users to signup. This requires local database
                                                                    authentication
                                                                    to be enabled.
                                                                </dd>
                                                                <h4>Password Requirements</h4>
                                                                <dd>This section allows you to customize your local DB
                                                                    password
                                                                    requirements
                                                                    and ensure that when users change their password or
                                                                    signup
                                                                    they are
                                                                    picking strong passwords.
                                                                </dd>
                                                                <dd>Setting any entry field to a blank value will revert
                                                                    it
                                                                    back
                                                                    to default.
                                                                </dd>
                                                                <dt>Enforce Character Requirements</dt>
                                                                <dd>This option will enforce the character type
                                                                    requirements
                                                                    for
                                                                    passwords.
                                                                    <ul>
                                                                        <li>Minimum Lowercase Characters - Minimum
                                                                            number of
                                                                            lowercase
                                                                            characters required to appear in the
                                                                            password.
                                                                        </li>
                                                                        <li>Minimum Uppercase Characters - Minimum
                                                                            number of
                                                                            uppercase
                                                                            characters required to appear in the
                                                                            password.
                                                                        </li>
                                                                        <li>Minimum Digit Characters - Minimum number of
                                                                            digits
                                                                            required to appear in the password. Digits
                                                                            include
                                                                            1234567890.
                                                                        </li>
                                                                        <li>Minimum Special Characters - Minimum number
                                                                            of
                                                                            special
                                                                            characters required to appear in the
                                                                            password.
                                                                            Special
                                                                            characters include
                                                                            `!@#$%^&amp;*()_-=+[]\{}|;:",.&gt;&lt;/?.
                                                                        </li>
                                                                    </ul>
                                                                </dd>
                                                                <dt>Enforce Complexity Requirement</dt>
                                                                <dd>Enable the enforcement of complex passwords. We
                                                                    currently use
                                                                    <a href="https://github.com/dropbox/zxcvbn">zxcvbn</a>
                                                                    for
                                                                    determining this.
                                                                    <ul>
                                                                        <li>Minimum Complexity - The default value of
                                                                            the
                                                                            log factor
                                                                            is 11 as it is considered secure. More
                                                                            information about
                                                                            this can be found at
                                                                            <a href="https://www.usenix.org/system/files/conference/usenixsecurity16/sec16_paper_wheeler.pdf">here</a>
                                                                        </li>
                                                                    </ul>
                                                                </dd>
                                                            </dl>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <!-- /.row -->
                                        </div>
                                        <!-- /.tab-pane -->

                                        <div data-tab="ldap"
                                             data-bind="class: 'tab-pane' + (tab_active() == 'ldap' ? ' active' : '')">
                                            <div class="row">
                                                <div class="col-12 col-sm-6 col-lg-4">
                                                    {% if error %}
                                                        <div class="alert alert-danger alert-dismissible">
                                                            <button type="button" class="close" data-dismiss="alert"
                                                                    aria-hidden="true">&times;
                                                            </button>
                                                            <h4><i class="icon fa fa-ban"></i> Error!</h4>
                                                            {{ error }}
                                                        </div>
                                                    {% endif %}
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">LDAP Authentication Settings</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <fieldset>
                                                                <div class="form-group">
                                                                    <input type="checkbox" id="ldap_enabled"
                                                                           name="ldap_enabled"
                                                                           class="checkbox"
                                                                           data-bind="checked: ldap_enabled">
                                                                    <label for="ldap_enabled">Enable LDAP
                                                                        Authentication</label>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Type</label>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input type="radio" name="ldap_type"
                                                                                   id="ldap_type_openldap"
                                                                                   value="ldap"
                                                                                   data-bind="enable: ldap_enabled, checked: ldap_type">
                                                                            OpenLDAP
                                                                        </label>
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <label>
                                                                            <input type="radio" name="ldap_type"
                                                                                   id="ldap_type_ad"
                                                                                   value="ad"
                                                                                   data-bind="enable: ldap_enabled, checked: ldap_type">
                                                                            Active Directory
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </fieldset>
                                                            <fieldset>
                                                                <legend>Administrator Info</legend>
                                                                <div class="form-group">
                                                                    <label for="ldap_uri">LDAP URI</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_uri"
                                                                           id="ldap_uri"
                                                                           placeholder="e.g. ldaps://your-ldap-server:636"
                                                                           data-bind="enable: ldap_enabled, value: ldap_uri, valueUpdate: 'afterkeydown'">
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="ldap_base_dn">LDAP Base DN</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_base_dn"
                                                                           id="ldap_base_dn"
                                                                           placeholder="e.g. dc=mydomain,dc=com"
                                                                           data-bind="enable: ldap_enabled, value: ldap_base_dn, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group"
                                                                     data-bind="visible: ldap_type() == 'ldap'">
                                                                    <label for="ldap_admin_username">LDAP admin
                                                                        username</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_admin_username"
                                                                           id="ldap_admin_username"
                                                                           placeholder="e.g. cn=admin,dc=mydomain,dc=com"
                                                                           data-bind="enable: ldap_enabled() && ldap_type() == 'ldap', value: ldap_admin_username, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group"
                                                                     data-bind="visible: ldap_type() == 'ldap'">
                                                                    <label for="ldap_admin_password">LDAP admin
                                                                        password</label>
                                                                    <input type="password" class="form-control"
                                                                           name="ldap_admin_password"
                                                                           id="ldap_admin_password"
                                                                           placeholder="LDAP Admin password"
                                                                           data-bind="enable: ldap_enabled() && ldap_type() == 'ldap', value: ldap_admin_password, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group"
                                                                     data-bind="visible: ldap_type() == 'ad'">
                                                                    <label for="ldap_domain">Active Directory
                                                                        domain</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_domain" id="ldap_domain"
                                                                           placeholder="Active Directory domain"
                                                                           data-bind="enable: ldap_enabled() && ldap_type() == 'ad', value: ldap_domain, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                            </fieldset>
                                                            <fieldset>
                                                                <legend>Filters</legend>
                                                                <div class="form-group">
                                                                    <label for="ldap_filter_basic">Basic filter</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_filter_basic"
                                                                           id="ldap_filter_basic"
                                                                           placeholder="e.g. (objectClass=inetorgperson)"
                                                                           data-bind="enable: ldap_enabled, value: ldap_filter_basic, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="ldap_filter_username">Username
                                                                        field</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_filter_username"
                                                                           id="ldap_filter_username"
                                                                           placeholder="e.g. uid"
                                                                           data-bind="enable: ldap_enabled, value: ldap_filter_username, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group"
                                                                     data-bind="visible: ldap_enabled() && ldap_type() == 'ldap'">
                                                                    <label for="ldap_filter_group">Group
                                                                        filter</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_filter_group"
                                                                           id="ldap_filter_group"
                                                                           placeholder="e.g. (objectclass=groupOfNames)"
                                                                           data-bind="enable: ldap_enabled() && ldap_type() == 'ldap', value: ldap_filter_group, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group"
                                                                     data-bind="visible: ldap_enabled() && ldap_type() == 'ldap'">
                                                                    <label for="ldap_filter_groupname">Group name
                                                                        field</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_filter_groupname"
                                                                           id="ldap_filter_groupname"
                                                                           placeholder="e.g. member"
                                                                           data-bind="enable: ldap_enabled() && ldap_type() == 'ldap', value: ldap_filter_groupname, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                            </fieldset>
                                                            <fieldset>
                                                                <legend>Group Security</legend>
                                                                <div class="form-group">
                                                                    <label>Status</label>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input type="radio" name="ldap_sg_enabled"
                                                                                   id="ldap_sg_off" value="false"
                                                                                   data-bind="enable: ldap_enabled, checked: ldap_sg_enabled, checkedValue: false">
                                                                            OFF
                                                                        </label>
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <label>
                                                                            <input type="radio" name="ldap_sg_enabled"
                                                                                   id="ldap_sg_on" value="true"
                                                                                   data-bind="enable: ldap_enabled, checked: ldap_sg_enabled, checkedValue: true">
                                                                            ON
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="ldap_admin_group">Admin group</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_admin_group" id="ldap_admin_group"
                                                                           placeholder="e.g. cn=sysops,dc=mydomain,dc=com"
                                                                           data-bind="enable: ldap_enabled() && ldap_sg_enabled(), value: ldap_admin_group, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="ldap_operator_group">Operator
                                                                        group</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_operator_group"
                                                                           id="ldap_operator_group"
                                                                           placeholder="e.g. cn=operators,dc=mydomain,dc=com"
                                                                           data-bind="enable: ldap_enabled() && ldap_sg_enabled(), value: ldap_operator_group, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="ldap_user_group">User group</label>
                                                                    <input type="text" class="form-control"
                                                                           name="ldap_user_group" id="ldap_user_group"
                                                                           placeholder="e.g. cn=users,dc=mydomain,dc=com"
                                                                           data-bind="enable: ldap_enabled() && ldap_sg_enabled(), value: ldap_user_group, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                            </fieldset>
                                                            <fieldset>
                                                                <legend>ADVANCE</legend>
                                                                <div class="form-group">
                                                                    <label>Roles Autoprovisioning</label>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input type="radio" name="autoprovisioning"
                                                                                   id="autoprovisioning_off" value="false"
                                                                                   data-bind="enable: ldap_enabled, checked: autoprovisioning, checkedValue: false">
                                                                            OFF
                                                                        </label>
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <label>
                                                                            <input type="radio" name="autoprovisioning"
                                                                                   id="autoprovisioning_on" value="true"
                                                                                   data-bind="enable: ldap_enabled, checked: autoprovisioning, checkedValue: true">
                                                                            ON
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="autoprovisioning_attribute">Roles
                                                                        provisioning
                                                                        field</label>
                                                                    <input type="text" class="form-control"
                                                                           name="autoprovisioning_attribute"
                                                                           id="autoprovisioning_attribute"
                                                                           placeholder="e.g. eduPersonEntitlement"
                                                                           data-bind="enable: ldap_enabled() && autoprovisioning(), value: autoprovisioning_attribute, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>

                                                                <div
                                                                    class="form-group {% if error %}has-error{% endif %}">
                                                                    <label for="urn_value">Urn prefix</label>
                                                                    <input type="text" class="form-control"
                                                                           name="urn_value"
                                                                           id="urn_value"
                                                                           placeholder="e.g. urn:mace:<yourOrganization>"
                                                                           data-bind="enable: ldap_enabled() && autoprovisioning(), value: urn_value, valueUpdate: 'afterkeydown'">
                                                                    {% if error %}
                                                                        <span class="help-block with-errors">Please input the correct prefix for your urn value</span>
                                                                    {% endif %}
                                                                </div>
                                                                <div class="form-group">
                                                                    <label>Purge Roles If Empty</label>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input type="radio" name="purge"
                                                                                   id="purge_off"
                                                                                   value="false"
                                                                                   data-bind="enable: ldap_enabled() && autoprovisioning(), checked: purge, checkedValue: false">
                                                                            OFF
                                                                        </label>
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <label>
                                                                            <input type="radio" name="purge"
                                                                                   id="purge_on"
                                                                                   value="true"
                                                                                   data-bind="enable: ldap_enabled() && autoprovisioning(), checked: purge, checkedValue: true">
                                                                            ON
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                                <div class="callout callout-warning"
                                                                     data-bind="visible: purge() === 1">
                                                                    <h5>Notice!</h5>
                                                                    <p>Users will lose their associated zones unless
                                                                        they already have their auto-provisioning field
                                                                        prepopulated.</p>
                                                                </div>
                                                            </fieldset>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->

                                                <div class="col-12 col-sm-6 col-lg-8">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">Settings Help</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <dl class="dl-horizontal">
                                                                <dt>Enable LDAP Authentication</dt>
                                                                <dd>Turn on / off the LDAP authentication.</dd>
                                                                <dt>Type</dt>
                                                                <dd>Select your current directory service type.
                                                                    <ul>
                                                                        <li>
                                                                            OpenLDAP - Open source implementation of the
                                                                            Lightweight
                                                                            Directory Access Protocol.
                                                                        </li>
                                                                        <li>
                                                                            Active Directory - Active Directory is a
                                                                            directory
                                                                            service that Microsoft developed for the
                                                                            Windows
                                                                            domain
                                                                            networks.
                                                                        </li>
                                                                    </ul>
                                                                </dd>
                                                                <dt>ADMINISTRATOR INFO</dt>
                                                                <dd>Your LDAP connection string and admin credential
                                                                    used by
                                                                    PDA to
                                                                    query user information.
                                                                    <ul>
                                                                        <li>
                                                                            LDAP URI - The fully qualified domain names
                                                                            of
                                                                            your
                                                                            directory servers. (e.g.
                                                                            ldap://127.0.0.1:389)
                                                                        </li>
                                                                        <li>
                                                                            LDAP Base DN - The point from where a PDA
                                                                            will
                                                                            search
                                                                            for users.
                                                                        </li>
                                                                        <li>
                                                                            LDAP admin username - Your LDAP
                                                                            administrator
                                                                            user which
                                                                            has permission to query information in the
                                                                            Base
                                                                            DN
                                                                            above. Not needed for Active Directory
                                                                            authentication.
                                                                        </li>
                                                                        <li>
                                                                            LDAP admin password - The password of LDAP
                                                                            administrator
                                                                            user. Not needed for Active Directory
                                                                            authentication.
                                                                        </li>
                                                                        <li>
                                                                            Active Directory domain - Active Directory
                                                                            domain used.
                                                                        </li>
                                                                    </ul>
                                                                </dd>
                                                                <dt>FILTERS</dt>
                                                                <dd>Define how you want to filter your user in LDAP
                                                                    query.
                                                                    <ul>
                                                                        <li>
                                                                            Basic filter - The filter that will be
                                                                            applied
                                                                            to all
                                                                            LDAP query by PDA. (e.g.
                                                                            <i>(objectClass=inetorgperson)</i> for
                                                                            OpenLDAP
                                                                            and
                                                                            <i>(objectClass=organizationalPerson)</i>
                                                                            for Active Directory)
                                                                        </li>
                                                                        <li>
                                                                            Username field - The field PDA will look for
                                                                            user's
                                                                            username. (e.g. <i>uid</i> for OpenLDAP and
                                                                            <i>sAMAccountName</i>
                                                                            for Active Directory)
                                                                        </li>
                                                                        <li>
                                                                            Group filter - The filter that will be
                                                                            applied
                                                                            to all
                                                                            LDAP group queries by PDA. (e.g. <i>(objectClass=groupOfNames)</i>
                                                                            for OpenLDAP)
                                                                        </li>
                                                                        <li>
                                                                            Group name field - The field PDA will look
                                                                            for
                                                                            group
                                                                            names. (e.g. <i>member</i> for OpenLDAP)
                                                                        </li>
                                                                    </ul>
                                                                </dd>
                                                                <dt>GROUP SECURITY</dt>
                                                                <dd>User can be assigned to PDA's User or Admin group by
                                                                    matching
                                                                    following LDAP Group.
                                                                    <ul>
                                                                        <li>
                                                                            Status - Turn on / off group security
                                                                            feature.
                                                                        </li>
                                                                        <li>
                                                                            Admin group - Your LDAP admin group.
                                                                        </li>
                                                                        <li>
                                                                            Operator group - Your LDAP operator group.
                                                                        </li>
                                                                        <li>
                                                                            User group - Your LDAP user group.
                                                                        </li>
                                                                    </ul>
                                                                </dd>
                                                                <dt>ADVANCE</dt>
                                                                <dd> Provision PDA user privileges based on LDAP Object
                                                                    Attributes.
                                                                    Alternative to Group Security Role Management.
                                                                    <ul>
                                                                        <li>
                                                                            Roles Autoprovisioning - If toggled on, the
                                                                            PDA
                                                                            Role and
                                                                            the associations of users found in the local
                                                                            db,
                                                                            will be
                                                                            instantly updated from the LDAP server every
                                                                            time they
                                                                            log in.
                                                                        </li>
                                                                        <li>
                                                                            Roles provisioning field - The attribute in
                                                                            the
                                                                            ldap
                                                                            server populated by the urn values where PDA
                                                                            will look
                                                                            for a new Role and/or new associations to
                                                                            domains/accounts.
                                                                        </li>
                                                                        <li>
                                                                            Urn prefix - The prefix used before the
                                                                            static
                                                                            keyword
                                                                            "powerdns-admin" for your entitlements in
                                                                            the
                                                                            ldap
                                                                            server. Must comply with RFC no.8141.
                                                                        </li>
                                                                        <li>
                                                                            Purge Roles If Empty - If toggled on, ldap
                                                                            entries that
                                                                            have no valid "powerdns-admin" records to
                                                                            their
                                                                            autoprovisioning field, will lose all their
                                                                            associations
                                                                            with any zone or account, also reverting to
                                                                            a
                                                                            User in
                                                                            the process, despite their current role in
                                                                            the
                                                                            local db.<br>
                                                                            If toggled off, in the same scenario they
                                                                            get to
                                                                            keep
                                                                            their existing associations and their
                                                                            current
                                                                            Role.
                                                                        </li>
                                                                    </ul>
                                                                </dd>
                                                            </dl>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <!-- /.row -->
                                        </div>
                                        <!-- /.tab-pane -->

                                        <div data-tab="google"
                                             data-bind="class: 'tab-pane' + (tab_active() == 'google' ? ' active' : '')">
                                            <div class="row">
                                                <div class="col-12 col-sm-6 col-lg-4">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">Google OAuth Settings</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <div class="form-group">
                                                                <input type="checkbox" id="google_oauth_enabled"
                                                                       name="google_oauth_enabled" class="checkbox"
                                                                       data-bind="checked: google_oauth_enabled">
                                                                <label for="google_oauth_enabled">Enable Google
                                                                    OAuth</label>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="google_oauth_client_id">Client
                                                                    ID</label>
                                                                <input type="text" class="form-control"
                                                                       name="google_oauth_client_id"
                                                                       id="google_oauth_client_id"
                                                                       placeholder="Google OAuth Client ID"
                                                                       data-bind="enable: google_oauth_enabled, value: google_oauth_client_id, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="google_oauth_client_secret">Client
                                                                    Secret</label>
                                                                <input type="text" class="form-control"
                                                                       name="google_oauth_client_secret"
                                                                       id="google_oauth_client_secret"
                                                                       placeholder="Google OAuth Client Secret"
                                                                       data-bind="enable: google_oauth_enabled, value: google_oauth_client_secret, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="google_oauth_scope">Scope</label>
                                                                <input type="text" class="form-control"
                                                                       name="google_oauth_scope"
                                                                       id="google_oauth_scope"
                                                                       placeholder="e.g. email profile"
                                                                       data-bind="enable: google_oauth_enabled, value: google_oauth_scope, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="google_base_url">API URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="google_base_url" id="google_base_url"
                                                                       placeholder="e.g. https://www.googleapis.com/oauth2/v3/"
                                                                       data-bind="enable: google_oauth_enabled, value: google_base_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <input type="checkbox"
                                                                       id="google_oauth_auto_configure"
                                                                       name="google_oauth_auto_configure"
                                                                       class="checkbox"
                                                                       data-bind="enable: google_oauth_enabled, checked: google_oauth_auto_configure">
                                                                <label for="google_oauth_auto_configure">Enable
                                                                    Google
                                                                    OAuth Auto-Configuration</label>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="visible: google_oauth_auto_configure">
                                                                <label for="google_oauth_metadata_url">Metadata
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="google_oauth_metadata_url"
                                                                       id="google_oauth_metadata_url"
                                                                       placeholder="e.g. https://accounts.google.com/.well-known/openid-configuration"
                                                                       data-bind="enable: google_oauth_enabled() && google_oauth_auto_configure(), value: google_oauth_metadata_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="hidden: google_oauth_auto_configure">
                                                                <label for="google_token_url">Token URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="google_token_url" id="google_token_url"
                                                                       placeholder="e.g. https://oauth2.googleapis.com/token"
                                                                       data-bind="enable: google_oauth_enabled() && !google_oauth_auto_configure(), value: google_token_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="hidden: google_oauth_auto_configure">
                                                                <label for="google_authorize_url">Authorize
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="google_authorize_url"
                                                                       id="google_authorize_url"
                                                                       placeholder="e.g. https://accounts.google.com/o/oauth2/v2/auth"
                                                                       data-bind="enable: google_oauth_enabled() && !google_oauth_auto_configure(), value: google_authorize_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->

                                                <div class="col-12 col-sm-6 col-lg-8">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">Settings Help</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <p>Fill in all the fields in the left form.</p>
                                                            <p>Make sure you add PDA redirection URI (e.g
                                                                http://localhost:9191/google/authorized) to your Google
                                                                App
                                                                Credentials Restriction.</p>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <!-- /.row -->
                                        </div>
                                        <!-- /.tab-pane -->

                                        <div data-tab="github"
                                             data-bind="class: 'tab-pane' + (tab_active() == 'github' ? ' active' : '')">
                                            <div class="row">
                                                <div class="col-12 col-sm-6 col-lg-4">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">GitHub OAuth Settings</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <div class="form-group">
                                                                <input type="checkbox" id="github_oauth_enabled"
                                                                       name="github_oauth_enabled" class="checkbox"
                                                                       data-bind="checked: github_oauth_enabled">
                                                                <label for="github_oauth_enabled">Enable GitHub
                                                                    OAuth</label>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="github_oauth_key">Client ID</label>
                                                                <input type="text" class="form-control"
                                                                       name="github_oauth_key" id="github_oauth_key"
                                                                       placeholder="Github OAuth Client ID"
                                                                       data-bind="enable: github_oauth_enabled, value: github_oauth_key, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="github_oauth_secret">Client
                                                                    Secret</label>
                                                                <input type="text" class="form-control"
                                                                       name="github_oauth_secret"
                                                                       id="github_oauth_secret"
                                                                       placeholder="Github OAuth Client Secret"
                                                                       data-bind="enable: github_oauth_enabled, value: github_oauth_secret, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="github_oauth_scope">Scope</label>
                                                                <input type="text" class="form-control"
                                                                       name="github_oauth_scope"
                                                                       id="github_oauth_scope"
                                                                       placeholder="e.g. email"
                                                                       data-bind="enable: github_oauth_enabled, value: github_oauth_scope, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="github_oauth_api_url">API URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="github_oauth_api_url"
                                                                       id="github_oauth_api_url"
                                                                       placeholder="e.g. https://api.github.com/user"
                                                                       data-bind="enable: github_oauth_enabled, value: github_oauth_api_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <input type="checkbox"
                                                                       id="github_oauth_auto_configure"
                                                                       name="github_oauth_auto_configure"
                                                                       class="checkbox"
                                                                       data-bind="enable: github_oauth_enabled, checked: github_oauth_auto_configure">
                                                                <label for="github_oauth_auto_configure">Enable
                                                                    GitHub
                                                                    OAuth Auto-Configuration</label>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="visible: github_oauth_auto_configure">
                                                                <label for="github_oauth_metadata_url">Metadata
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="github_oauth_metadata_url"
                                                                       id="github_oauth_metadata_url"
                                                                       placeholder="e.g. https://{yourDomain}/.well-known/oauth-metadata.json"
                                                                       data-bind="enable: github_oauth_enabled() && github_oauth_auto_configure(), value: github_oauth_metadata_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="hidden: github_oauth_auto_configure">
                                                                <label for="github_oauth_token_url">Token
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="github_oauth_token_url"
                                                                       id="github_oauth_token_url"
                                                                       placeholder="e.g. https://github.com/login/oauth/access_token"
                                                                       data-bind="enable: github_oauth_enabled() && !github_oauth_auto_configure(), value: github_oauth_token_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="hidden: github_oauth_auto_configure">
                                                                <label for="github_oauth_authorize_url">Authorize
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="github_oauth_authorize_url"
                                                                       id="github_oauth_authorize_url"
                                                                       placeholder="e.g. https://github.com/login/oauth/authorize"
                                                                       data-bind="enable: github_oauth_enabled() && !github_oauth_auto_configure(), value: github_oauth_authorize_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->

                                                <div class="col-12 col-sm-6 col-lg-8">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">Settings Help</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <p>Fill in all the fields in the left form.</p>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <!-- /.row -->
                                        </div>
                                        <!-- /.tab-pane -->

                                        <div data-tab="azure"
                                             data-bind="class: 'tab-pane' + (tab_active() == 'azure' ? ' active' : '')">
                                            <div class="row">
                                                <div class="col-12 col-sm-6 col-lg-4">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">Azure OAuth Settings</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <div class="form-group">
                                                                <input type="checkbox" id="azure_oauth_enabled"
                                                                       name="azure_oauth_enabled" class="checkbox"
                                                                       data-bind="checked: azure_oauth_enabled">
                                                                <label for="azure_oauth_enabled">Enable Microsoft
                                                                    Azure
                                                                    OAuth</label>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="azure_oauth_key">Client ID</label>
                                                                <input type="text" class="form-control"
                                                                       name="azure_oauth_key" id="azure_oauth_key"
                                                                       placeholder="Azure OAuth Client ID"
                                                                       data-bind="enable: azure_oauth_enabled, value: azure_oauth_key, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="azure_oauth_secret">Client
                                                                    Secret</label>
                                                                <input type="text" class="form-control"
                                                                       name="azure_oauth_secret"
                                                                       id="azure_oauth_secret"
                                                                       placeholder="Azure OAuth Client Secret"
                                                                       data-bind="enable: azure_oauth_enabled, value: azure_oauth_secret, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="azure_oauth_scope">Scope</label>
                                                                <input type="text" class="form-control"
                                                                       name="azure_oauth_scope"
                                                                       id="azure_oauth_scope"
                                                                       placeholder="e.g. email"
                                                                       data-bind="enable: azure_oauth_enabled, value: azure_oauth_scope, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="azure_oauth_api_url">API URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="azure_oauth_api_url"
                                                                       id="azure_oauth_api_url"
                                                                       placeholder="e.g. https://graph.microsoft.com/v1.0/"
                                                                       data-bind="enable: azure_oauth_enabled, value: azure_oauth_api_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <input type="checkbox"
                                                                       id="azure_oauth_auto_configure"
                                                                       name="azure_oauth_auto_configure"
                                                                       class="checkbox"
                                                                       data-bind="enable: azure_oauth_enabled, checked: azure_oauth_auto_configure">
                                                                <label for="azure_oauth_auto_configure">Enable Azure
                                                                    OAuth Auto-Configuration</label>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="visible: azure_oauth_auto_configure">
                                                                <label for="azure_oauth_metadata_url">Metadata
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="azure_oauth_metadata_url"
                                                                       id="azure_oauth_metadata_url"
                                                                       placeholder="e.g. https://login.microsoftonline.com/{TENANCY_ID}/v2.0/.well-known/openid-configuration"
                                                                       data-bind="enable: azure_oauth_enabled() && azure_oauth_auto_configure(), value: azure_oauth_metadata_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="hidden: azure_oauth_auto_configure">
                                                                <label for="azure_oauth_token_url">Token URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="azure_oauth_token_url"
                                                                       id="azure_oauth_token_url"
                                                                       placeholder="e.g. https://login.microsoftonline.com/{TENANCY_ID}/oauth2/v2.0/token"
                                                                       data-bind="enable: azure_oauth_enabled() && !azure_oauth_auto_configure(), value: azure_oauth_token_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="hidden: azure_oauth_auto_configure">
                                                                <label for="azure_oauth_authorize_url">Authorize
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="azure_oauth_authorize_url"
                                                                       id="azure_oauth_authorize_url"
                                                                       placeholder="e.g. https://login.microsoftonline.com/{TENANCY_ID}/oauth2/v2.0/authorize"
                                                                       data-bind="enable: azure_oauth_enabled() && !azure_oauth_auto_configure(), value: azure_oauth_authorize_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <fieldset>
                                                                <legend>Group Security</legend>
                                                                <div class="form-group">
                                                                    <label>Status</label>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input type="radio" name="azure_sg_enabled"
                                                                                   id="azure_sg_off" value="false"
                                                                                   data-bind="enable: azure_oauth_enabled, checked: azure_sg_enabled, checkedValue: false">
                                                                            OFF
                                                                        </label>
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <label>
                                                                            <input type="radio" name="azure_sg_enabled"
                                                                                   id="azure_sg_on" value="true"
                                                                                   data-bind="enable: azure_oauth_enabled, checked: azure_sg_enabled, checkedValue: true">
                                                                            ON
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="azure_admin_group">Admin group</label>
                                                                    <input type="text" class="form-control"
                                                                           name="azure_admin_group"
                                                                           id="azure_admin_group"
                                                                           placeholder="e.g. 00000000-0000-0000-0000-000000000000"
                                                                           data-bind="enable: azure_oauth_enabled() && azure_sg_enabled(), value: azure_admin_group, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="azure_operator_group">Operator
                                                                        group</label>
                                                                    <input type="text" class="form-control"
                                                                           name="azure_operator_group"
                                                                           id="azure_operator_group"
                                                                           placeholder="e.g. 00000000-0000-0000-0000-000000000000"
                                                                           data-bind="enable: azure_oauth_enabled() && azure_sg_enabled(), value: azure_operator_group, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="azure_user_group">User group</label>
                                                                    <input type="text" class="form-control"
                                                                           name="azure_user_group" id="azure_user_group"
                                                                           placeholder="e.g. 00000000-0000-0000-0000-000000000000"
                                                                           data-bind="enable: azure_oauth_enabled() && azure_sg_enabled(), value: azure_user_group, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                            </fieldset>
                                                            <fieldset>
                                                                <legend>Azure Group Account Sync / Creation</legend>
                                                                <div class="form-group">
                                                                    <label
                                                                        for="azure_group_accounts_enabled">Status</label>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input type="radio"
                                                                                   name="azure_group_accounts_enabled"
                                                                                   id="azure_group_accounts_off"
                                                                                   value="false"
                                                                                   data-bind="enable: azure_oauth_enabled, checked: azure_group_accounts_enabled, checkedValue: false">
                                                                            OFF
                                                                        </label>
                                                                        &nbsp;&nbsp;&nbsp;
                                                                        <label>
                                                                            <input type="radio"
                                                                                   name="azure_group_accounts_enabled"
                                                                                   id="azure_group_accounts_on"
                                                                                   value="true"
                                                                                   data-bind="enable: azure_oauth_enabled, checked: azure_group_accounts_enabled, checkedValue: true">
                                                                            ON
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="azure_group_accounts_name">Azure group
                                                                        name
                                                                        claim</label>
                                                                    <input type="text" class="form-control"
                                                                           name="azure_group_accounts_name"
                                                                           id="azure_group_accounts_name"
                                                                           placeholder="e.g. displayName"
                                                                           data-bind="enable: azure_oauth_enabled() && azure_group_accounts_enabled(), value: azure_group_accounts_name, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="azure_group_accounts_name_re">Azure
                                                                        group name
                                                                        claim regex</label>
                                                                    <input type="text" class="form-control"
                                                                           name="azure_group_accounts_name_re"
                                                                           id="azure_group_accounts_name_re"
                                                                           placeholder="e.g. (.*)"
                                                                           data-bind="enable: azure_oauth_enabled() && azure_group_accounts_enabled(), value: azure_group_accounts_name_re, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="azure_group_accounts_description">Azure
                                                                        group
                                                                        description claim</label>
                                                                    <input type="text" class="form-control"
                                                                           name="azure_group_accounts_description"
                                                                           id="azure_group_accounts_description"
                                                                           placeholder="e.g. description. If empty uses whole string"
                                                                           data-bind="enable: azure_oauth_enabled() && azure_group_accounts_enabled(), value: azure_group_accounts_description, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="azure_group_accounts_description_re">Azure
                                                                        group name
                                                                        description regex</label>
                                                                    <input type="text" class="form-control"
                                                                           name="azure_group_accounts_description_re"
                                                                           id="azure_group_accounts_description_re"
                                                                           placeholder="e.g. (.*). If empty uses whole string"
                                                                           data-bind="enable: azure_oauth_enabled() && azure_group_accounts_enabled(), value: azure_group_accounts_description_re, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                            </fieldset>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->

                                                <div class="col-12 col-sm-6 col-lg-8">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">Settings Help</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <p>Fill in all the fields in the left form.</p>
                                                            <p>You first need to define an Application Registration in
                                                                your
                                                                Azure
                                                                Active Directory, with the appropriate HTTPS URL for
                                                                this
                                                                endpoint,
                                                                and with the appropriate rights, as explained in the
                                                                documentation.</p>
                                                            <p>
                                                            <ul>
                                                                <li>Under the Azure Active Directory, select App
                                                                    Registrations, and
                                                                    create a new one. Give it any name you want, and the
                                                                    Redirect
                                                                    URI shoule be type 'Web' and of the format <b>https://powerdnsadmin/azure/authorized</b>
                                                                    (replace the host name approriately).
                                                                </li>
                                                                <li>Select the newly-created registration</li>
                                                                <li>On the Overview page, the Application ID is your new
                                                                    Client ID
                                                                    to use with PowerDNS-Admin
                                                                </li>
                                                                <li>On the Overview page, make a note of your
                                                                    Directory/Tenant ID -
                                                                    you need it for the API URLs later
                                                                </li>
                                                                <li>Ensure Access Tokens are enabled in the
                                                                    Authentication
                                                                    section
                                                                </li>
                                                                <li>Under Certificates and Secrets, create a new Client
                                                                    Secret. Note
                                                                    this secret as it is the new Client Secret to use
                                                                    with
                                                                    PowerDNS-Admin
                                                                </li>
                                                                <li>Under API Permissions, you need to add permissions.
                                                                    Add
                                                                    permissions for Graph API, Delegated. Add: email,
                                                                    openid,
                                                                    profile, GroupMember.Read, User.Read and possibly
                                                                    User.Read.All.
                                                                    You then need to grant admin approval for your
                                                                    organisation.
                                                                </li>
                                                                <li>For the Scope, use <b>User.Read openid mail
                                                                    profile</b>
                                                                </li>
                                                                <li>Replace the [tenantID] in the default URLs for
                                                                    authorize
                                                                    and
                                                                    token with your Tenant ID.
                                                                </li>
                                                            </ul>
                                                            </p>
                                                            <p>If <b>AZURE GROUP ACCOUNT SYNC/CREATION</b> is enabled,
                                                                Accounts will
                                                                be created automatically based on group membership. If
                                                                an
                                                                Account
                                                                exists, an authenticated user with group membership is
                                                                added
                                                                to the
                                                                Account</p>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <!-- /.row -->
                                        </div>
                                        <!-- /.tab-pane -->

                                        <div data-tab="oidc"
                                             data-bind="class: 'tab-pane' + (tab_active() == 'oidc' ? ' active' : '')">
                                            <div class="row">
                                                <div class="col-12 col-sm-6 col-lg-4">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">OpenID Connect OAuth Settings</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <div class="form-group">
                                                                <input type="checkbox" id="oidc_oauth_enabled"
                                                                       name="oidc_oauth_enabled" class="checkbox"
                                                                       data-bind="checked: oidc_oauth_enabled">
                                                                <label for="oidc_oauth_enabled">Enable OpenID
                                                                    Connect
                                                                    OAuth</label>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="oidc_oauth_key">Client ID</label>
                                                                <input type="text" class="form-control"
                                                                       name="oidc_oauth_key" id="oidc_oauth_key"
                                                                       placeholder="OIDC OAuth Client ID"
                                                                       data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_key, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="oidc_oauth_secret">Client Secret</label>
                                                                <input type="text" class="form-control"
                                                                       name="oidc_oauth_secret"
                                                                       id="oidc_oauth_secret"
                                                                       placeholder="OIDC OAuth Client Secret"
                                                                       data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_secret, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="oidc_oauth_scope">Scope</label>
                                                                <input type="text" class="form-control"
                                                                       name="oidc_oauth_scope" id="oidc_oauth_scope"
                                                                       placeholder="e.g. email"
                                                                       data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_scope, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="oidc_oauth_api_url">API URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="oidc_oauth_api_url"
                                                                       id="oidc_oauth_api_url"
                                                                       placeholder="e.g. https://api.oidc.com/user"
                                                                       data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_api_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <input type="checkbox"
                                                                       id="oidc_oauth_auto_configure"
                                                                       name="oidc_oauth_auto_configure"
                                                                       class="checkbox"
                                                                       data-bind="enable: oidc_oauth_enabled, checked: oidc_oauth_auto_configure">
                                                                <label for="oidc_oauth_auto_configure">Enable OIDC
                                                                    OAuth Auto-Configuration</label>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="visible: oidc_oauth_auto_configure">
                                                                <label for="oidc_oauth_metadata_url">Metadata
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="oidc_oauth_metadata_url"
                                                                       id="oidc_oauth_metadata_url"
                                                                       placeholder="e.g. https://{YOUR_DOMAIN}/login/oauth/.well-known/openid-configuration"
                                                                       data-bind="enable: oidc_oauth_enabled() && oidc_oauth_auto_configure(), value: oidc_oauth_metadata_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="hidden: oidc_oauth_auto_configure">
                                                                <label for="oidc_oauth_token_url">Token URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="oidc_oauth_token_url"
                                                                       id="oidc_oauth_token_url"
                                                                       placeholder="e.g. https://{YOUR_DOMAIN}/login/oauth/access_token"
                                                                       data-bind="enable: oidc_oauth_enabled() && !oidc_oauth_auto_configure(), value: oidc_oauth_token_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group"
                                                                 data-bind="hidden: oidc_oauth_auto_configure">
                                                                <label for="oidc_oauth_authorize_url">Authorize
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="oidc_oauth_authorize_url"
                                                                       id="oidc_oauth_authorize_url"
                                                                       placeholder="e.g. https://{YOUR_DOMAIN}/login/oauth/authorize"
                                                                       data-bind="enable: oidc_oauth_enabled() && !oidc_oauth_auto_configure(), value: oidc_oauth_authorize_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label for="oidc_oauth_logout_url">Logout
                                                                    URL</label>
                                                                <input type="text" class="form-control"
                                                                       name="oidc_oauth_logout_url"
                                                                       id="oidc_oauth_logout_url"
                                                                       placeholder="e.g. https://{YOUR_DOMAIN}/login/oauth/logout"
                                                                       data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_logout_url, valueUpdate: 'afterkeydown'">
                                                                <span class="help-block with-errors"></span>
                                                            </div>
                                                            <fieldset>
                                                                <legend>Claims</legend>
                                                                <div class="form-group">
                                                                    <label for="oidc_oauth_username">Username</label>
                                                                    <input type="text" class="form-control"
                                                                           name="oidc_oauth_username"
                                                                           id="oidc_oauth_username"
                                                                           placeholder="e.g. preferred_username"
                                                                           data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_username, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="oidc_oauth_email">Email</label>
                                                                    <input type="text" class="form-control"
                                                                           name="oidc_oauth_email" id="oidc_oauth_email"
                                                                           placeholder="e.g. email"
                                                                           data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_email, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="oidc_oauth_firstname">First Name</label>
                                                                    <input type="text" class="form-control"
                                                                           name="oidc_oauth_firstname"
                                                                           id="oidc_oauth_firstname"
                                                                           placeholder="e.g. given_name"
                                                                           data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_firstname, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label for="oidc_oauth_last_name">Last Name</label>
                                                                    <input type="text" class="form-control"
                                                                           name="oidc_oauth_last_name"
                                                                           id="oidc_oauth_last_name"
                                                                           placeholder="e.g. family_name"
                                                                           data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_last_name, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                            </fieldset>
                                                            <fieldset>
                                                                <legend>Advanced</legend>
                                                                <div class="form-group">
                                                                    <label for="oidc_oauth_account_name_property">Autoprovision
                                                                        Account Name property</label>
                                                                    <input type="text" class="form-control"
                                                                           name="oidc_oauth_account_name_property"
                                                                           id="oidc_oauth_account_name_property"
                                                                           placeholder="e.g. account_name"
                                                                           data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_account_name_property, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                                <div class="form-group">
                                                                    <label
                                                                        for="oidc_oauth_account_description_property">Autoprovision
                                                                        Account Description property</label>
                                                                    <input type="text" class="form-control"
                                                                           name="oidc_oauth_account_description_property"
                                                                           id="oidc_oauth_account_description_property"
                                                                           placeholder="e.g. account_description"
                                                                           data-bind="enable: oidc_oauth_enabled, value: oidc_oauth_account_description_property, valueUpdate: 'afterkeydown'">
                                                                    <span class="help-block with-errors"></span>
                                                                </div>
                                                            </fieldset>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->
                                                <div class="col-12 col-sm-6 col-lg-8">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            <h3 class="card-title">Settings Help</h3>
                                                        </div>
                                                        <!-- /.card-header -->
                                                        <div class="card-body">
                                                            <p>Fill in all the fields in the left form.</p>
                                                        </div>
                                                        <!-- /.card-body -->
                                                    </div>
                                                    <!-- /.card -->
                                                </div>
                                                <!-- /.col -->
                                            </div>
                                            <!-- /.row -->
                                        </div>
                                        <!-- /.tab-pane -->

                                    </div>
                                    <!-- /.tab-content -->
                                </div>
                                <!-- /.nav-tabs-custom -->
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <div class="error"></div>
                                <button type="button" class="btn btn-primary"
                                        title="Save Settings" data-bind="click: onSaveClick">
                                    <i class="fa-solid fa-save"></i>&nbsp;Save Settings
                                </button>
                            </div>
                            <!-- /.card-footer -->
                        </div>
                        <!-- /.card -->
                    </form>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
{% endblock %}

{% block head_styles %}
    <style>
        .error { color: red !important; }
    </style>
{% endblock %}

{% block extrascripts %}
    <script>
        $(function () {
            let API_URL = '{{ url_for('admin.setting_authentication_api') }}';
            let CSRF_TOKEN = '{{ csrf_token() }}';
            let model = new AuthenticationSettingsModel({}, API_URL, CSRF_TOKEN, '#settings-editor');
            model.init(true);
        })
    </script>
{% endblock %}
